<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        业务管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>业务品牌 /
        推广链接
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form ref="form" :model="form" label-width="100px">
            <div class="basicInfo">基本信息</div>
            <div class="basicInfo1">
              <el-form-item class="list" label="业务类型：">
                {{form.busName}}
              </el-form-item>
              <el-form-item class="list" label="业务品牌：">
                {{form.channelName}}
              </el-form-item>
              <!-- <el-form-item class="list" label="推广形式：">
                {{form.channelType}}
              </el-form-item> -->
            </div>
          </el-form>
        </div>
        <div class="basicInfo2">推广链接</div>
        <el-table
          :data="list"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column
            width="300"
            show-overflow-tooltip
            label="推广名称"
            prop="typeName"
          ></el-table-column>
          <el-table-column
          show-overflow-tooltip
            min-width="200"
            label="推广链接"
            prop="typeValue"
          ></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <div @click="bigClick(scope.row)">
                <el-switch
                v-model="scope.row.status"
                active-color="#56BB8A"
                inactive-value="1"
                @change="statusChange"
                active-value="0"
                inactive-color="#C0C4CC"
              ></el-switch>
              </div> 
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button
            @click="back"
            class="filter-container"
            style="
              margin-left: 20px;
              float: left;
              text-align: left;
              font-size: 16px;
              color: rgb(31, 165, 243);
              cursor: pointer;
              width: auto;
            "
          >
            返回
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../plugins/https.js"
export default {
  data() {
    return {
      form: {
        busName:"",
        channelName:"",
        channelType:""
      },
      list: [
      ]
    };
  },
  created(){
    this.display()
  },
  methods: {
    display(){
      https.BusPromotion({channelUid:this.$route.query.channelUid}).then(res=>{
        if(res.data.code=="0000"){
          this.form.busName=res.data.busInfo.busName
          this.form.channelName=res.data.brandChannelInfo.channelName
          this.form.channelType=res.data.brandChannelInfo.channelType
          this.list=res.data.list
        }
      })
    },
    // 状态改变
    statusChange(val){
      console.log(val)
      this.val=val
      // this.bigClick()
    },
    back(){
      this.$router.go(-1)
    },
    bigClick(val){
      https.changeBusPromotionStatus({channelTypeId:val.id}).then(res=>{
        if(res.data.code=="0000"){
          this.display()
        }else{
           layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //2秒后自动关闭
          });
        }
      }).catch(err=>{})
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.sousuojg6_10 {
  width: 100%;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
.basicInfo {
  width: calc(100% - 40px);
  margin: 20px;
  margin-top: 0;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  float: left;
}
.basicInfo2 {
  width: calc(100% - 40px);
  margin: 20px;
  /* margin-top: 0; */
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 18px;
  float: left;
}
.basicInfo1 {
  width: calc(100% - 40px);
  margin-left: 20px;
  min-height: 60px;
  line-height: 60px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
  padding-top: 16px;
}
.list{
  min-width: 300px
}
</style>
